<template>
	<view class="main">
		<view class="card">
			<view class="card-tit flex align"><text></text>基本信息</view>
			<view class="input-item flex align">
				<view>商户名称</view>
				<input placeholder="输入商户名称" v-model="obj.name" />
			</view>
			<view class="input-item flex align">
				<view>法人</view>
				<input placeholder="输入法人" v-model="obj.juridical_person" />
			</view>
			<view class="input-item flex align">
				<view>联系电话</view>
				<input placeholder="输入联系电话" v-model="obj.telphone" />
			</view>
			<view class="input-item flex align">
				<view>所属地区</view>
				<view style="width: 432rpx;">
					<uni-data-picker v-model="obj.region" :clear-icon="false" :localdata="items" popup-title="请所在区域"
						@change="onchange"></uni-data-picker>
				</view>
				<!-- <input placeholder="选择所属地区" /> -->
			</view>
			<view class="input-item flex align">
				<view>详细地址</view>
				<input placeholder="输入详细地址" v-model="obj.address" />
			</view>
			<!-- 	<view class="input-item flex align">
				<view>探店时间</view>
				<view style="width: 432rpx;">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<text v-if="date==''" style="color:grey;">请选择探店时间</text>
						<text v-else>{{date}}</text>
						
					</picker>
				</view>
			</view> -->
			<view class="input-item flex align">
				<view>商户面积</view>
				<input placeholder="输入商户面积" v-model="obj.area" />
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>账号信息</view>
			<view class="input-item flex align">
				<view>账号</view>
				<input placeholder="设置账号" v-model="obj.username" />
			</view>
			<view class="input-item flex align">
				<view>密码</view>
				<input placeholder="设置密码" v-model="obj.password" />
			</view>
			<!-- <view class="input-item flex align">
				<view>再次输入密码</view>
				<input placeholder="填写密码" v-model="password2" />
			</view> -->
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>上传商户logo</view>
			<view class="loadUp" @click="toUpload()" v-if="obj.logo==''">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
			<view class="logo" @click="toUpload()" v-else>
				<image :src="obj.logo"></image>
			</view>

		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>上传营业执照</view>
			<view class="loadUp" @click="toUpload2()" v-if="obj.business_license==''">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
			<view class="logo" @click="toUpload2()" v-else>
				<image :src="obj.business_license"></image>
			</view>
		</view>
		<view class="resign-btn" @click="toResign()">立即添加</view>

	</view>
</template>

<script>
	import {
		storeAddCompany,
		regionLists,
		storeEditCompany,
		storeDetailCompany
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/utils/oss/oss.js'
	export default {
		data() {
			return {
				type: 1,
				items: [],
				obj: {
					name: '',
					logo: '',
					business_license: '',
					money: '',
					region: [],
					address: '',
					juridical_person: '',
					telphone: '',
					area: '',
					username: '',
					password: '',
				},
				id: ''
			};
		},
		onLoad(option) {
			this.type = option.type
			if (option.type == 2) {
				uni.setNavigationBarTitle({
					title: '编辑商户'
				})
				this.id = option.id
				this.getInfo()
			}
			this.getRegion()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			async getInfo() {
				const result = await storeDetailCompany({
					id: this.id
				})
				if (result.code == 1) {
					this.obj = result.data
				}
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			async getRegion() {
				const result = await regionLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					item.children.forEach(item2 => {
						item2.text = item2.name
						item2.value = item2.id
						if (item2.children.length > 0) {
							item2.children.forEach(item3 => {
								item3.text = item3.name
								item3.value = item3.id
							})
						}
					})
				})
				this.items = result.data
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.obj.region = arr
			},
			toUpload() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.obj.logo = 'https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					}
				})
			},
			toUpload2() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let ossPath = await uploadOss({
							filePathFore: 'img/',
							filePath: res.tempFilePaths[0],
						})
						that.obj.business_license = 'https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath
					}
				})
			},
			async checkToken() {
				const result = await checkToken2()
				if (result.code == 1) {

				} else {
					uni.navigateTo({
						url: '/pages/login/login?type=1'
					})
				}
			},
			// 入驻
			async toResign() {
				let obj = this.obj
				if (obj.name == '') {
					uni.showToast({
						title: '请输入商户名称',
						icon: 'error'
					})
					return false
				}
				console.log(obj)
				let that = this
				uni.showModal({
					title: "提示",
					content: "确定要提交吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toCom()
						} else {

						}
					}

				})
			},
			async toCom() {
				let obj = this.obj
				if (this.type == 1) {
					const result = await storeAddCompany(obj)
					if (result.code == 1) {
						uni.showToast({
							title: result.msg,
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'error'
						})
					}
				} else {
					const result = await storeEditCompany(obj)
					if (result.code == 1) {
						uni.showToast({
							title: result.msg,
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'error'
						})
					}
				}

			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 30rpx 24rpx;
			background: white;
			margin-bottom: 30rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;

				text {
					background: #FF6543;
					display: block;
					width: 5rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
				}
			}
		}

		.resign-btn {
			background: #FF6543;
			border-radius: 12rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: white;
			padding: 10rpx 81rpx;
			width: fit-content;
			margin: 80rpx auto;
		}
	}
</style>